<template>
	<div class="detaillove">
		<h3>猜你喜欢</h3>
		<ul>		
			<li v-for="item in arrLove">
				<div class="imgbox">
					<img :src="item.src">
				</div>
				<p>{{item.p}}</p>
				<h5>{{item.smallp}}</h5>
				<h3>{{item.price}}</h3>
			</li>				
		</ul>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.detaillove{
		>h3:before{
				content: " ";
				width: 30px;
				height: 1px;
				color: #000;
				position: absolute;
				top: 50%;
				left: -50px;
				display: block;
				background: #000;
			}
			>h3:after{
				content: " ";
				width: 30px;
				height: 1px;
				color: #000;
				position: absolute;
				top: 50%;
				right: -50px;
				display: block;
				background: #000;
			}
			>h3{
				font-weight: normal;
				text-align: center;
				padding: 10px 0;
				font-size: 16px;
				position: relative;
				display: inline-block;
				width: auto;
				margin:0 auto;
			}
		ul{
			li{
				float: left;
				width: 48%;
				margin:4px 0.8%;
				text-align: left;
				border-bottom: 0.2px solid rgba(0,0,0,.2);
				box-shadow: 0.2px 0 0 0 rgba(0,0,0,.2);
				 p{
			 	font-size: 14px;
			 	color: #000;
			 	padding: 6px 4px;
				 }
				 h5{
				 	font-size: 12px;
				 	font-weight: normal;
				 	padding: 2px 4px;
				 	color: #A9A9A9;
				 }
				 h3{
				 	color: #AEEEEE;
				 	text-align: left;
				 	font-size: 13px;
				 	padding: 4px 4px;
				 }
				  .imgbox{
				 	width:100%;
				 	height: 50vw;
				 	img{
				 		width: 100%;
				 		height: 100%;
				 	}
				 }
			}
		}
	}
</style>

<script type="text/javascript">
	export default{
		data(){
			return{
				arrLove:[]
			}
		},
		components:{

		},
		mounted(){
				this.$http.get('../../static/data/guess.json').then((res)=>{
					// console.log(res.data)
					this.arrLove=res.data;
				})
		},
		methods:{
			getData(){
				
			}
		}	
	}
</script>